<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        .swiper-container {
            width: 500px;
            height: 200px;
            border: 1px solid red;
            margin: 0 auto;
            position: relative;
            overflow: hidden;

        }
    </style>
</head>

<body>
    <div class="swiper-container">

    </div>

    <script type="text/javascript">
        class SwiperComponent {
            constructor(containerName, imgs) {
                this.containerEle = $(containerName);
                this.imgs = imgs;
                this.w = this.containerEle.width();
                this.h = this.containerEle.height();
                this.index = 1; //当前页码
                this.timer = null;

                this.createImgDom();
                this.cloneNodes();
                this.createDot();
                this.autoPlay();
                this.prevOrNext();
                this.changeDot()

            }
            // 创建图片节点
            createImgDom() {
                this.imgContainer = $("<div></div>", {
                    style: `width:${this.w*this.imgs.length}px;position:absolute;`
                })
                this.imgs.forEach(img => {
                    let imgEle = $(`<img />`, {
                        src: img,
                        style: `float:left;width:${this.w}px;height:${this.h}px;`
                    })
                    this.imgContainer.append(imgEle);
                })
                this.containerEle.append(this.imgContainer);
            }
            // 克隆节点 ，为实现无缝轮播图做铺垫
            cloneNodes() {
                let fEle = this.imgContainer.find("img").first().clone();
                let lEle = this.imgContainer.find("img").last().clone();
                this.imgContainer.width((this.imgs.length + 2) * this.w);
                this.imgContainer.find("img").last().after(fEle);
                this.imgContainer.find("img").first().before(lEle);
                this.imgContainer.css("left", -this.w);
            }
            // 自动播放相关函数
            autoPlay() {
                this.timer = setInterval(() => {
                    this.index++;

                    this.imgContainer.animate({
                        "left": "-" + this.index * this.w
                    }, () => {
                        // console.log(this.index);
                        if (this.index == this.imgs.length + 1) {
                            console.log(55555, this.imgContainer, this.w);
                            this.imgContainer.css("left", "-" + this.w + "px");
                            this.index = 1;
                        }
                        this.changeDot();
                    })
                }, 2000)
            }

            // 上一页下一页功能
            prevOrNext() {
                this.createPrevAndNextEle();
                // 鼠标移上按钮的时候停止自动轮播定时器
                this.prevAndNextEle.find("span").mouseenter(() => {
                    clearInterval(this.timer);
                })

                this.prevAndNextEle.find("span").mouseleave(() => {
                    this.autoPlay();
                })

                this.prevAndNextEle.find("span").first().click(() => {
                    console.log("上一页")
                    this.index--;

                    this.imgContainer.animate({
                        "left": "-" + this.index * this.w
                    }, () => {
                        // console.log(this.index);
                        if (this.index == 0) {
                            console.log(55555, this.imgContainer, this.w);
                            this.imgContainer.css("left", "-" + this.w * this.imgs.length + "px");
                            this.index = this.imgs.length;
                        }
                        this.changeDot()
                    })

                })
                this.prevAndNextEle.find("span").last().click(() => {
                    console.log("下一页")
                    this.index++;

                    this.imgContainer.animate({
                        "left": "-" + this.index * this.w
                    }, () => {
                        // console.log(this.index);
                        if (this.index == this.imgs.length + 1) {
                            console.log(55555, this.imgContainer, this.w);
                            this.imgContainer.css("left", "-" + this.w + "px");
                            this.index = 1;

                        }
                        this.changeDot()
                    })
                })
            }
            // 创建上一页下一页dom结构
            createPrevAndNextEle() {
                let prevAndNextEle = $("<div></div>", {
                    style: `width:100%;height:50px;color:white;font-size:40px;position:absolute;top:50%`,
                    html: `<span style='float:left;'><</span><span style='float:right'>></span>`
                })
                this.prevAndNextEle = prevAndNextEle;
                this.containerEle.append(prevAndNextEle);
            }



            // 创建自动轮播的控制点功能
            createDot() {
                this.createDotDom();
                // 鼠标移到点上的之后停止自动播放 
                this.dotEles.find("span").mouseenter(() => {
                    clearInterval(this.timer);
                })
                this.dotEles.find("span").mouseleave(() => {
                    this.autoPlay();
                })


                // 点击点切换轮播图功能
                let that = this;
                this.dotEles.find("span").click(function () {
                    that.dotEles.find("span").css("background", "red");
                    $(this).css("background", "white");

                    let index = that.dotEles.find("span").index($(this));
                    // console.log(index);
                    that.index = index + 1;
                    that.imgContainer.animate({
                        "left": "-" + that.index * that.w
                    })

                })
            }

            // 根据索引检测应该点击的点在哪里
            changeDot() {
                // console.log(this.dotEles)
                if (typeof this.dotEles !== 'undefined') {
                    console.log(123);
                    this.dotEles.find("span").css("background", "red");
                    this.dotEles.find("span").eq(this.index - 1).css("background", "white");
                }
            }

            createDotDom() {
                this.dotEles = $(`<div></div>`, {
                    style: "width:100%;height:30px;display:flex;justify-content: center;position:absolute;bottom:1%",
                })

                this.imgs.forEach(item => {
                    let imgEle = $("<span></span>", {
                        style: "display:block;width:20px;height:20px;background:red;border-radius: 50%;margin:3px"
                    })
                    this.dotEles.append(imgEle);
                })

                this.containerEle.append(this.dotEles);
            }


        }

        let imgs = ["../images/banner1.png", "../images/banner2.jpg", "../images/banne3.jpg",
            "../images/banner4.jpg",
            "../images/banner5.jpg",
            "../images/banner6.jpg"
        ];
        new SwiperComponent(".swiper-container", imgs);
    </script>
</body>

</html>